<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
<%@ taglib prefix="s" uri="/struts-tags"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.jsPlumb-1.3.16-all.js"></script>
<script type="text/javascript" src="js/flowchartConnectorsDemo.js.js"></script>
<link rel="stylesheet" href="css/flowchartDemo.css">




<script type="text/javascript">

	jsPlumb.bind("ready", function() {

	    jsPlumb.importDefaults({
	        Anchors: [ "LeftMiddle" ],
	        Endpoint : ["Dot", { radius: 2 }],
	        HoverPaintStyle : {strokeStyle: "#42a62c", lineWidth: 1 },
	        ConnectionOverlays : [
	            [ 
	                "Arrow", {
	                    location: 1,
	                    id: "arrow",
	                    length: 14,
	                    foldback: 0.8
	                } 
	            ]
	        ]
	    });

	    jsPlumb.connect({
	        source: $('#window1'),
	        target: $('#window2'),
	        anchors: [ "RightMiddle","LeftMiddle"],
	        connector:[ "Straight" ],
	        paintStyle: {
	            strokeStyle: "#000000", 
	            lineWidth:1
	        }
	    });
	        jsPlumb.connect({
		        source: $('#window2'),
		        target: $('#window3'),
		        anchors: [ "RightMiddle","LeftMiddle"],
		        connector:[ "Straight" ],
		        paintStyle: {
		            strokeStyle: "#000000", 
		            lineWidth:1
		        }
	    });
	        jsPlumb.connect({
		        source: $('#window3'),
		        target: $('#window4'),
		        anchors: [ "RightMiddle","LeftMiddle"],
		        connector:[ "Straight" ],
		        paintStyle: {
		            strokeStyle: "#000000", 
		            lineWidth:1
		        }
	    });
	   jsPlumb.connect({
		        source: $('#window4'),
		        target: $('#window8'),
		        anchors: [ "BottomCenter","TopCenter"],
		        connector:[ "Flowchart" ],
		        paintStyle: {
		            strokeStyle: "#000000", 
		            lineWidth:1
		        }
	    });
	   
       jsPlumb.connect({
	        source: $('#window8'),
	        target: $('#window7'),
	        anchors: [ "RightMiddle","LeftMiddle"],
	        connector:[ "Straight" ],
	        paintStyle: {
	            strokeStyle: "#000000", 
	            lineWidth:1
	        }
   });
       jsPlumb.connect({
	        source: $('#window7'),
	        target: $('#window6'),
	        anchors: [ "RightMiddle","LeftMiddle"],
	        connector:[ "Straight" ],
	        paintStyle: {
	            strokeStyle: "#000000", 
	            lineWidth:1
	        }
   });
       jsPlumb.connect({
	        source: $('#window6'),
	        target: $('#window5'),
	        anchors: [ "RightMiddle","LeftMiddle"],
	        connector:[ "Straight" ],
	        paintStyle: {
	            strokeStyle: "#000000", 
	            lineWidth:1
	        }
  });
       
       jsPlumb.connect({
	        source: $('#window5'),
	        target: $('#window9'),
	        anchors: [ "BottomCenter","TopCenter"],
	        connector:[ "Flowchart" ],
	        paintStyle: {
	            strokeStyle: "#000000", 
	            lineWidth:1
	        }
       
	        });
       jsPlumb.connect({
	        source: $('#window9'),
	        target: $('#window10'),
	        anchors: [ "RightMiddle","LeftMiddle"],
	        connector:[ "Straight" ],
	        paintStyle: {
	            strokeStyle: "#000000", 
	            lineWidth:1
	        }
	        });
 
	   
	   
		
	});

</script>

<script  type="text/javascript" charset="utf-8">
    $(function() {
    	

  	
    	$('[name="overlay"]').click(function() {
    		var checkeditems = new Array();
    		var boxes = $('input[name=overlay]:checked');
    		$(boxes).each(function(){
				checkeditems.push($(this).val());
    		});
    		
    		$.ajax({
    			cache: false,
			 	url: "getOperation.action",
			    type: "POST",
			    dataType: "html",
			    data: "checkeditems=" + checkeditems,
			    error: function(XMLHttpRequest, textStatus, errorThrown){
			        alert('Error ' + textStatus);
			        alert(errorThrown);
			        alert(XMLHttpRequest.responseText);
			    },
			    success: function(data){ 
			    	$('#totalbox').html(data);
			       }
			});
    		

          });
    	
          
    });

</script>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
</head>
<body>

<div id="totalbox">
<table border="1" cellpadding="2" cellspacing="2" align="center" width="100%">
            <tr height="20">
                <td height="20" colspan="4">
                    <center><h2><s:property value="%{SelectedApplication}"/></h2></center>
                    
                </td>
               
            </tr>
            <tr height="90%" valign="top">
                <td width="15%" align="left" valign="top">
                    <div id="menuwrapper" style="display: inline-block; vertical-align: top;">
							<h4>
								<s:checkboxlist id="overlaylist" label="Select an Over Lay" list="Overlays" 
								   name="overlay" value="selectedCheckBoxList" theme="vertical-checkbox" />
							
							
							<br>
							Factors Considered :
							<br>
							<br>
							<s:iterator status="stat" value="selectedCheckBoxList">
								<s:property /><br>
							</s:iterator>
							</h4> 
					</div>
                </td>
                <td width="100%" height="600px">
                    	<div id="outerblock" style="display:block; width: 100%;height: 100%; text-align: center; margin: auto;">
						<s:iterator status="stat" value="OperationNameMapping">
							  	<s:set var="tempVar">window<s:property value="%{#stat.count}" /></s:set>
							  	<s:set name="oppvalue"><s:property value="value" /></s:set>
					  	
							  	<s:if test="%{#oppvalue >= 75}">
							  		<s:set var="windowColor">greenwindow</s:set>
							  	</s:if>
							  	<s:elseif test="%{#oppvalue >= 40 && #oppvalue < 75}">
							  		<s:set var="windowColor">yellowwindow</s:set>
							  	</s:elseif>
							  	<s:elseif test="%{#oppvalue < 40}">
							  		<s:set var="windowColor">redwindow</s:set>
							  	</s:elseif>
							  	
							  	<s:url id="loadDrillDownDetails" action="getDrillDown.action">
								    <s:param name="SelectedOperation"><s:property value="key"/></s:param>
								</s:url>
								<s:a href="%{loadDrillDownDetails}"><div class="window <s:property value="#windowColor"/>" id="<s:property value="#tempVar"/>" style="display:inline-block;"><strong><s:property value="key"/></strong><br/><br/></div></s:a>
							
							</s:iterator>
						</div>
                </td>
            </tr>
        </table>
        
        </div>
        

</body>


</body>
</html>